<%= include ic/header.html %>
<style>
#nav_discover{color:#fff}
body{background:#f7f7f7;}
footer{display:none;}
#main{text-align:center;}
#banner{width:100%;height:auto;background:#333;padding:0 1rem;text-align:center;position:relative;}
#btnBack{width:100%;color:#fff;}
#btnBack a{color:#fff;}
#demo{width:100%;text-align:center;position:relative;color:#eee;}
#btnPrev,#btnNext{height:100%;position:absolute;top:0;font-size:50px;font-family:"宋体","微软雅黑";padding:10px;cursor:pointer;}
#btnPrev{left:0;}
#btnNext{right:0;}
#demo img{width:100%;max-width:1000px;height:auto;margin:auto;}
#thumbBar{width:250px;height:70px;margin:10px auto;padding:0;overflow:hidden;}
#thumbBar .thumb{width:60px;height:60px;margin:5px;float:left;overflow:hidden;background:#aaa;}
#thumbBar .thumb img{cursor:pointer;}
#thumbBar .thumb.c{outline:1px #fff solid;}
#ctrlBar{height:60px;position:absolute;right:10px;bottom:5px;font-size:30px;line-height:60px;}
#ctrlBar div{width:90px;height:100%;float:right;text-align:center;}
#ctrlBar div a{padding:0 10px;color:#eee;}
#detail,#imageData{width:100%;max-width:1000px;float:none;margin:20px auto 0;background:#fff;}
#detail-hd{border-bottom:none;height:80px;}
#detail-hd .am-comment-avatar{margin:10px 8px 0 18px;}
#detail-hd .am-u-md-10 .am-fl{color:#999;line-height:24px;font-size:16px;text-align:left;}
#detail-hd .am-u-md-10 .hd{white-space:nowrap;color:#111;font-size:18px;font-weight:800;}
#detail-hd .am-u-md-1{line-height:80px;}
#detail-hd font{color:#aaa;}
#comments,#mycomment{width:100%;max-width:1000px;float:none;margin:10px auto;}
#comments ul{text-align:left;}
#imageData{text-align:left;color:#666;}
</style>
<div id="main">
  <div id="banner">
    <div id="btnBack"><a href="javascript:history.go(-1);"><i class="am-icon-caret-left"></i> BACK</a></div>
    <div class="am-cf"></div>
    <div id="demo">
      <img src="/p?id=<%= result.id %>" onload="fixDemo()"/>
      <div id="btnPrev" <% if(greaterImages[0]){ %>onclick="gotoUrl('/image/detail?id=<%= greaterImages[0].id %>')"<% } %>>&lt;</div>
      <div id="btnNext" <% if(lessImages[0]){ %>onclick="gotoUrl('/image/detail?id=<%= lessImages[0].id %>')"<% } %>>&gt;</div>
    </div>
    <div class="am-cf"></div>
    <div id="thumbBar">
      <div class="thumb" <% if(greaterImages[1]){ %>onclick="gotoUrl('/image/detail?id=<%= greaterImages[1].id %>')"<% } %>>
        <% if(greaterImages[1]){ %><img src="/p?id=<%= greaterImages[1].id %>&w=200" onload="fixImg()" ><% } %>
      </div>
      <div class="thumb" <% if(greaterImages[0]){ %>onclick="gotoUrl('/image/detail?id=<%= greaterImages[0].id %>')"<% } %>>
        <% if(greaterImages[0]){ %><img src="/p?id=<%= greaterImages[0].id %>&w=200" onload="fixImg()" ><% } %>
      </div>
      <div class="thumb c">
        <img src="/p?id=<%= result.id %>&w=200" onload="fixImg()" >
      </div>
      <div class="thumb" <% if(lessImages[0]){ %>onclick="gotoUrl('/image/detail?id=<%= lessImages[0].id %>')"<% } %>>
        <% if(lessImages[0]){ %><img src="/p?id=<%= lessImages[0].id %>&w=200" onload="fixImg()" ><% } %>
      </div>
      <div class="thumb" <% if(lessImages[1]){ %>onclick="gotoUrl('/image/detail?id=<%= lessImages[1].id %>')"<% } %>>
        <% if(lessImages[1]){ %><img src="/p?id=<%= lessImages[1].id %>&w=200" onload="fixImg()" ><% } %>
      </div>
    </div>
    <div id="ctrlBar">
      <div id="btnShare"><a href="javascript:$('#shareBg').toggle()"><i class="am-icon-share-alt"></i></a></div>
      <% if(user){ %><div id="btnLike"><a href="javascript:toggleFav()"><i class="am-icon-heart-o"></i></a></div><% } %>
      <% if(user && (user.id==result.get("user").id || user.get("adminRole")=="admin")){ %><div id="btnDel"><a href="javascript:deleteImg()"><i class="am-icon-trash-o"></i></a></div><% } %>
    </div>
    <div id="shareBg">
      <div class="-mob-share-weibo"></div>
      <div class="-mob-share-weixin"></div>
      <div class="-mob-share-facebook"></div>
      <div class="-mob-share-twitter"></div>
      <script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey=18d4e86772598"></script>
      <!--MOB SHARE END-->
    </div>
  </div>
  <div class="am-cf"></div>
  <div id="detail">
    <div id="detail-hd" class="am-g">
      <div class="am-u-sm-12 am-u-md-10 am-padding-xs"><div class="am-fl"><img src="<% if(result.get('user') && result.get('user').get('avatar')){ %><%= result.get('user').get('avatar').thumbnailURL(100, 200) %><% }else{ %>/i/default_avatar.png<% } %>" class="am-comment-avatar" /></div>
      <div class="am-fl" style="padding:10px;max-width: 570px;text-overflow:ellipsis;overflow:hidden;"><font class="hd"><%= result.get('name') %></font><br/>by <%= result.get('user').get("displayName") %></div></div>
      <div class="am-u-md-1 am-padding-xs am-hide-md-down"><i class="am-icon-eye"></i> <%= result.get('clicks') %></div>
      <div class="am-u-md-1 am-padding-xs am-hide-md-down"><i class="am-icon-heart-o"></i> <%= result.get('likes') %></div>
    </div>
  </div>
  <div class="am-cf"></div>
  <div id="imageData" class="am-g am-padding-vertical-sm">
    <div class="am-u-sm-4 am-padding-horizontal-xl am-padding-vertical-xs">Airline : <% if(result.get('airline')){ %><%= result.get('airline') %><% }else{ %>N/A<% } %></div>
    <div class="am-u-sm-4 am-padding-horizontal-xl am-padding-vertical-xs">Flight No. : <% if(result.get('flightNo')){ %><%= result.get('flightNo') %><% }else{ %>N/A<% } %></div>
    <div class="am-u-sm-4 am-padding-horizontal-xl am-padding-vertical-xs">From : <% if(result.get('from')){ %><%= result.get('from') %><% }else{ %>N/A<% } %></div>
    <div class="am-u-sm-4 am-padding-horizontal-xl am-padding-vertical-xs">A/C Type : <% if(result.get('acType')){ %><%= result.get('acType') %><% }else{ %>N/A<% } %></div>
    <div class="am-u-sm-4 am-padding-horizontal-xl am-padding-vertical-xs">Class : <% if(result.get('classes')){ %><%= result.get('classes') %><% }else{ %>N/A<% } %></div>
    <div class="am-u-sm-4 am-padding-horizontal-xl am-padding-vertical-xs">To : <% if(result.get('to')){ %><%= result.get('to') %><% }else{ %>N/A<% } %></div>
  </div>
  <div class="am-cf"></div>
  <div id="comments"><ul></ul></div>
  <div class="am-cf"></div>
  <% if(user){ %>
  <div id="mycomment" class="am-margin-top ml15 am-hide-md-down">
    <input max-length="240" class="am-padding-xs" type="text" name="keyword" value="" placeholder="" />
    <div class="am-btn-sm" onclick="submitComment()">Comment</div>
  </div>
  <% } %>
</div>
<%= include ic/footer.html %>
<script type="text/javascript">
var page=1,act="add",islocked=true;
var $loading = $("#my-modal-loading");
$(function() {
  $('#shareBg').hide();
  checkFav();
  $("#comments ul").load("../comment/list", {ajax:true,type:"image",id:"<%= result.id %>"});
  $(window).resize(function(){
    fixImg();
    fixDemo();
  });
});

function fixDemo(){
  $("#btnPrev,#btnNext").css("line-height",$("#demo img").height()+"px");
  $("#btnPrev,#btnNext").css("font-size",$("#demo img").height()/8+"px");
}

function fixImg(){
  $("#thumbBar .thumb").height($("#thumbBar .thumb").first().width());
  $("#thumbBar .thumb").map(function(){
    var w=$(this).innerWidth();
    if($(this).children("img").width()/$(this).children("img").height()>1){
      $(this).children("img").height(w);
      $(this).children("img").css("width","auto");
    }else{
      $(this).children("img").width(w);
      $(this).children("img").css("height","auto");
    }
  });
}

function submitComment(){
  var content = $.trim($("#mycomment input").val());
  if(content.length<10){
    mAlert({
      title:"Warn!",
      text:"You must input 10 letter at least！",
      onConfirm:function(e) {}
    });
  }else{
    $loading.modal('open');
    $.post("/my/sendcommtent", {
      "ajax"			: true,
      "content"		: content,
      "id"		    : "<%= result.id %>",
      "type"		  : "image"
    },function(data){
      $loading.modal('close');
      if(typeof(data)=="object" && typeof(data.error)=="undefined"){
        $("#comments ul").load("../comment/list", {ajax:true,type:"image",id:"<%= result.id %>"});
      }else{
        //console.dir(data);
        mAlert({
          title:"Error",
          text:data.error,
          onConfirm:function(e) {}
        });
      }
    }, "json");
  }
}

function deleteImg(){
  var $Confirm = $("#my-confirm");
  var $confirmBtn = $Confirm.find('[data-am-modal-confirm]');
  $confirmBtn.one('click', function() {
    $loading.modal('open');
    $.post("/my/photo/delete?ids=<%= result.id %>", {
      "ajax"			: true
    },function(data){
      $loading.modal('close');
      if(typeof(data)=="object" && typeof(data.error)=="undefined"){
        mAlert({
          title:"Alert",
          text:"Success!",
          onConfirm:function(e) {gotoUrl("/discover");}
        });
      }else{
        //console.dir(data);
        mAlert({
          title:"Error",
          text:data.error,
          onConfirm:function(e) {}
        });
      }
    }, "json");
  });

  $Confirm.find(".text").text("Are you sure to delete this image？");
  if($Confirm.is(".am-modal-out")){
    $Confirm.modal('open');
  }else{
    $Confirm.modal({relatedTarget: this});
  }
}

function toggleFav(){
  if(!islocked){
    islocked=true;
    $.post("/my/togglefav", {
      "ajax"	: true,
      "id"		: "<%= result.id %>",
      "type"  : "image",
      "act"   : act
    },function(data){
      if(typeof(data)=="object" && typeof(data.error)=="undefined"){
        checkFav();
      }else{
        islocked=false;
        mAlert({
          title:"Error",
          text:data.error,
          onConfirm:function(e) {}
        });
      }
    }, "json");
  }
}

function checkFav(){
  $.post("/my/checkfav", {
    "ajax"	: true,
    "id"		: "<%= result.id %>",
    "type"  : "image"
  },function(data){
    islocked=false;
    if(typeof(data)=="object" && typeof(data.error)=="undefined"){
      if(data.success){
        act="del";
        $("#btnLike a").css("color","#e00");
        $("#btnLike a i").attr("class","am-icon-heart");
      }else{
        act="add";
        $("#btnLike a").css("color","#fff");
        $("#btnLike a i").attr("class","am-icon-heart-o");
      }
    }else{
      console.error(data.error);
    }
  }, "json");
}
</script>
